{% extends "base.html" %}
{% import editor_macro(request) as editor %}

{% block head %}
    <link rel="stylesheet" href="{{ theme_asset(request, 'css/board_common.css?ver=1.0.0') }}">
    <link rel="stylesheet" href="{{ theme_asset(request, 'css/qa.css?ver=1.0.0') }}">
    <script rel="stylesheet" src="/static/js/viewimageresize.js"></script>
    {{ editor.head() }}
{% endblock head %}

{% block title %}{{ qa_config.qa_title }}{% endblock title %}
{% block subtitle %}{{ qa_config.qa_title }}{% endblock subtitle %}

{% block content %}
    {% if qa_config.qa_content_head %}
        {{ qa_config.qa_content_head|safe }}
    {% endif %}

    <div id="bo_qa_view" class="bo_common bo_view">

        <h2 id="view_subject">
            <span class="subject_cate">{{ qa.qa_category }}</span>
            {{ qa.qa_subject|safe }}
        </h2>

        <div id="view_header">
            <h2 class="blind">页面信息</h2>

            <div class="header_info">
                <span class="blind">按作者</span>
                <span>{{ qa.qa_name }}</span>

                <span class="blind">写作日</span>
                <span class="info_date">
                    <i class="fa fa-regular fa-clock" aria-hidden="true"></i>
                    {{ qa.qa_datetime|datetime_format }}
                </span>
            </div>

            <ul class="view_buttons">
                <li>
                    <a href="{{ url_for('qa_list') }}?{{ request.query_params }}" class="btn_b01 btn" title="列表">
                        <i class="fa fa-list" aria-hidden="true"></i>
                        <span class="blind">列表</span>
                    </a>
                </li>
                <li>
                    <a href="{{ url_for('qa_form_write') }}?{{ request.query_params }}" class="btn_b01 btn" title="写作">
                        <i class="fa fa-pencil" aria-hidden="true"></i>
                        <span class="blind">写作</span>
                    </a>
                </li>
                {% if request.state.is_super_admin or qa.mb_id == request.state.login_member.mb_id %}
                <li class="buttons_more">
                    <button type="button" class="more_opener btn_b01 btn" title="公告板阅读选项">
                        <i class="fa fa-ellipsis-v" aria-hidden="true"></i>
                        <span class="blind">公告板阅读选项</span>
                    </button>
                    <ul class="more">
                        <li>
                            <a href="{{ url_for('qa_form_edit', qa_id=qa.qa_id) }}" title="校正">
                                校正
                                <i class="fa fa-pen-to-square" aria-hidden="true"></i>
                            </a>
                        </li>
                        <li>
                            <a href="{{ url_for('qa_delete', qa_id=qa.qa_id) }}" onclick="del(this.href); return false;" title="删除">
                                删除
                                <i class="fa fa-regular fa-trash-can" aria-hidden="true"></i>
                            </a>
                        </li>
                    </ul>
                </li>
                {% endif %}
            </ul>

            <script>
                jQuery(function($){
                    $(".buttons_more .more_opener").on("click", function(e) {
                        e.stopPropagation();
                        $(this).next(".more").toggle();
                    })
                    $(document).on("click", function (e) {
                        if(!$(e.target).closest(".more_opener").length) {
                            $(".buttons_more .more").hide();
                        }
                    });
                });
            </script>

        </div>

        <div id="view_article">
            <h2 class="blind">文本</h2>

            <div id="article_img">
                {% for image in qa.image %}
                    <a href="/{{ image }}" target="_blank" class="view_image">
                        <img src="/{{ image }}" max-width="{{ qa_config.qa_image_width }}">
                    </a>
                {% endfor %}
            </div>

            {% if qa.qa_email or qa.qa_hp %}
            <ul id="article_contact">
                {% if qa.qa_email %}
                <li>
                    <i class="fa fa-regular fa-envelope" aria-hidden="true"></i>
                    电子邮件: {{ qa.qa_email }}
                </li>
                {% endif %}
                {% if qa.qa_hp %}
                <li>
                    <i class="fa fa-phone" aria-hidden="true"></i>
                    联系人: {{ qa.qa_hp }}
                </li>
                {% endif %}
            </ul>
            {% endif %}

            <div id="article_contents" class="{{ request.state.editor }}">
                {{ qa.qa_content|safe }}
            </div>
        </div>

        <div id="view_file" class="view_filelink">
            <h2 class="blind">附件</h2>
            <ul>
                {% for file in qa.file %}
                <li>
                    <i class="fa fa-download" aria-hidden="true"></i>
                    <a href="{{ url_for('qa_download_file', qa_id=qa.qa_id, file_index=file.index) }}" class="view_file_download">
                        <strong>{{ file.name }}</strong>
                    </a>
                </li>
                {% endfor %}
            </ul>
        </div>

        <div id="view_move">
            {% if prev %}
            <a href="{{ url_for('qa_view', qa_id=prev.qa_id) }}?{{ request.query_params }}" class="prev">
                <i class="fa fa-chevron-left" aria-hidden="true"></i>
                <span class="label">上一篇文章</span>
            </a>
            {% else %}
            <div class="prev"></div>
            {% endif %}
            {% if next %}
            <a href="{{ url_for('qa_view', qa_id=next.qa_id) }}?{{ request.query_params }}" class="next">
                <i class="fa fa-chevron-right" aria-hidden="true"></i>
                <span class="label">下一篇文章</span>
            </a>
            {% else %}
            <div class="next"></div>
            {% endif %}
        </div>

    </div>

    {% if answer %}
    <div id="bo_qa_answer_view" class="bo_common">

        <div id="answer_view_header">

            <div class="header_subject">
                <span class="label">答案</span>
                <span class="subject">
                    {{ answer.qa_subject }}
                </span>
                <span class="datetime">
                    <i class="fa fa-regular fa-clock" aria-hidden="true"></i>
                    {{ answer.qa_datetime|datetime_format }}
                </span>
            </div>

            {% if request.state.is_super_admin %}
            <div class="buttons_more">
                <button type="button" class="more_opener btn_b01 btn" title="应答选项"><i class="fa fa-ellipsis-v" aria-hidden="true"></i><span class="blind">应答选项</span></button>
                <ul class="more">
                    <li><a href="{{ url_for('qa_form_edit', qa_id=answer.qa_id) }}">答案更正</a></li>
                    <li><a href="{{ url_for('qa_delete', qa_id=answer.qa_id) }}" onclick="del(this.href); return false;">删除答案</a></li>
                </ul>
            </div>
            {% endif %}

        </div>

        <div id="answer_view_contents">
            <div id="contents_img">
                {% for image in answer.image %}
                    <a href="/{{ image }}" target="_blank" class="view_image">
                        <img src="/{{ image }}">
                    </a>
                {% endfor %}
            </div>

            {{ answer.qa_content|safe }}

            <div class="view_filelink">
                <h2 class="blind">附件</h2>

                <ul>
                    {% for file in answer.file %}
                    <li>
                        <i class="fa fa-download" aria-hidden="true"></i>
                        <a href="/{{ file.path }}" download="{{ file.name }}">
                            <strong>{{ file.name }}</strong>
                        </a>
                    </li>
                    {% endfor %}
                </ul>
            </div>
        </div>

        <div id="qa_continue">
            <a href="{{ url_for('qa_form_write') }}?qa_related={{ qa.qa_id }}">其他问题</a>
        </div>

    </div>

    {% elif request.state.is_super_admin %}
    <div id="bo_qa_answer_write" class="bo_common bo_write">
        <h2>注册答案</h2>

        <form name="fanswer" method="post" action="{{ url_for('qa_write_update') }}?{{ request.query_params }}" onsubmit="return fwrite_submit(this);" enctype="multipart/form-data" autocomplete="off">
            <input type="hidden" name="token" value="">
            <input type="hidden" name="qa_parent" value="{{ qa.qa_id }}">
            <input type="hidden" name="qa_category" value="{{ qa.qa_category }}">
            <input type="hidden" name="qa_html" value="1">

            <div class="write_subject">
                <label for="qa_subject" class="blind">标题</label>
                <input type="text" name="qa_subject" value="" id="qa_subject" required="" class="frm_input required full_input" size="50" maxlength="255" placeholder="标题">
            </div>

            <div>
                <label for="qa_content" class="blind">内容<strong>必不可少的</strong></label>
                {% if qa_config.qa_use_editor %}
                    {{ editor.body("qa_content", "") }}
                {% else %}
                    <textarea id="qa_content" name="qa_content" style="width: 100%; height: 300px;"></textarea>
                {% endif %}
            </div>

            <div class="write_flie">
                <div class="file_wr">
                    <label for="qa_file_1" class="lb_icon"><i class="fa fa-download" aria-hidden="true"></i><span class="blind"> 文件 #1</span></label>
                    <input type="file" name="file1" id="qa_file_1" title="文件的附件 1 :  容量 {{ qa_config.qa_upload_size }} 仅上传字节或更少" class="frm_file">
                </div>
            </div>

            <div class="write_flie">
                <div class="file_wr">
                    <label for="qa_file_2" class="lb_icon"><i class="fa fa-download" aria-hidden="true"></i><span class="blind"> 文件 #2</span></label>
                    <input type="file" name="file2" id="qa_file_2" title="文件的附件 2 :  容量 {{ qa_config.qa_upload_size }} 仅上传字节或更少" class="frm_file">
                </div>
            </div>

            <div class="btn_confirm">
                <button type="submit" id="btn_submit" accesskey="s" class="btn_submit btn">注册答案</button>
            </div>
        </form>

        <script>
            function html_auto_br(obj)
            {
                if (obj.checked) {
                    result = confirm("你想做一个自动换行符吗?\n\n自动换行符是帖子内容之间换行的地方。<br>转换为标记的能力.");
                    if (result)
                        obj.value = "2";
                    else
                        obj.value = "1";
                }
                else
                    obj.value = "";
            }
    
            function fwrite_submit(f)
            {
                f.token.value = generate_token();

                return true;
            }
        </script>

    </div>

    {% endif %}

    {% if related_list %}
    <div id="bo_qa_relation" class="bo_list">
        <h2>一个相关的问题</h2>

        <table class="list_table">
            <thead>
                <tr>
                    <th scope="col">标题</th>
                    <th scope="col">注册日</th>
                    <th scope="col">状态</th>
                </tr>
            </thead>
            <tbody>
            {% for related in related_list %}
                <tr>
                    <td class="table_subject">
                        <span class="bo_cate_link">{{ related.qa_category }}</span>
                        <a href="{{ url_for('qa_view', qa_id=related.qa_id) }}?{{ request.query_params }}" class="bo_tit">
                            {{ related.qa_subject }}
                        </a>
                    </td>
                    <td class="table_datetime">{{ related.qa_datetime|datetime_format('%y-%m-%d') }}</td>
                    <td class="table_status">
                        {% if related.qa_status %}
                            <span class="txt_done">完成答案</span>
                        {% else %}
                            <span class="txt_rdy">等待答案</span>
                        {% endif %}
                    </td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
    {% endif %}

    <script>
    $(function() {
        $("#view_article").viewimageresize();
    });
    </script>

    {% if qa_config.qa_content_tail %}
        {{ qa_config.qa_content_tail|safe }}
    {% endif %}
{% endblock content %}